<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Artalk On One Page Example</title>
  <!-- 1. 引入 Artalk.css -->
  <link rel="stylesheet" href="/dist/Artalk.css">
</head>
<body>

  <h1>Multiple Artalk On One Page Example</h1>

  <div class="main">
    <h2>Artalk One</h2>
    <div id="ArtalkComments-1"></div>

    <h2>Artalk Two</h2>
    <div id="ArtalkComments-2"></div>
  </div>

  <!-- 2. 引入 Artalk.js -->
  <script src="/dist/Artalk.js"></script>
  <!-- 3. 配置 Artalk -->
  <script>
  (function () {
    // 公用配置
    const commonConf = {
      placeholder: '来啊，快活啊 ( ゜- ゜)',
      noComment: '快来成为第一个评论的人吧~',
      defaultAvatar: 'mp',
      serverUrl: 'http://localhost:23366/',
      readMore: {
        pageSize: 15,
        autoLoad: true
      }
    }

    // 第一个评论
    new Artalk({
      el: '#ArtalkComments-1',
      pageKey: 'multiple-on-one-page-1',
      ...commonConf
    })

    // 第二个评论
    new Artalk({
      el: '#ArtalkComments-2',
      pageKey: 'multiple-on-one-page-2',
      ...commonConf
    })
  })();
  </script>
</body>
</html>
